<template>
  <view style="display: flex; flex-direction: column; height: 100vh">
    <u-sticky>
      <u-navbar
        back-text=" "
        title="工作台"
        :background="background"
        title-color="#ffffff"
        :custom-back="customBack"
        back-icon-color="#ffffff"
		title-size="36"
      ></u-navbar>
      <xmInfo
        :projectno="itemContent.projectno"
        :projectname="itemContent.projectname"
      ></xmInfo>
    </u-sticky>
    <view style="flex: 1; overflow: scroll">
      <!-- <scroll-view class="scroll-list" scroll-y="true"  :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh"> -->
      <!-- 判断是微信还是小程序 -->
      <!-- v-if="isApp" -->
      <!-- <view class="cu-list margin-sm">小程序</view> -->
       <!-- u-skeleton -->
        <view class="flex margin-sm flex-wrap justify-between u-skeleton">
            <view
              class="flex bg-white padding radius margin-bottom"
              v-for="item in cuIconList"
              :key="item.name"
              @click="goRoute(item.url, item.status)"
              v-if="item.isSHow"
            >
              <view class="xm-item u-skeleton-rect">
                <view class="xm-item-1">{{ item.name }}</view>
          <view class="xm-item-2" v-if="item.name == '整改提交'"
            >{{ itemContent.pmStatus.zgOverTimes || 0 }} /
            {{ itemContent.pmStatus.zgSumTimes || 0 }}
          </view>
                <!-- <view class="xm-item-2" >{{ item.num1 + "/" + item.num2 }} </view> -->
              </view>
              <!-- <u-icon :name="nameIcon"></u-icon> -->
          <image
            style="width: 86rpx; height: 86rpx"
            :src="item.icon"
            mode="aspectFit"
            class="u-skeleton-circle"
          />
              <!-- <u-image width="86rpx" height="86rpx" :src="item.icon"></u-image> -->
            </view>
            <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
          </view>

      <!-- 分割线 -->
      <!-- <view class="cu-list margin-sm">企业微信</view> -->
      <!-- v-else="!isApp" -->
      <view class="flex margin-sm flex-wrap justify-between">
        <view
          class="flex bg-white padding radius margin-bottom"
          v-for="item in cuIconListApp"
          :key="item.name"
          @click="goRoute(item.url, item.status)"
          v-if="item.isSHow"
        >
          <view class="xm-item">
            <view class="xm-item-1">{{ item.name }}</view>
            <view class="xm-item-2" v-if="item.name == '整改'"
              >{{ itemContent.pmStatus.zgOverTimes || 0 }} /
              {{ itemContent.pmStatus.zgSumTimes || 0 }}
            </view>
            <view
              class="xm-item-2"
              style="margin-left: 10px"
              v-if="item.name == '废管'"
              >{{ itemContent.pmStatus.feiguanTimes || 0 }}
            </view>
          </view>
          <!-- <u-icon :name="nameIcon"></u-icon> -->
		  <image
		    style="width: 86rpx; height: 86rpx"
		    :src="item.icon"
		    mode="aspectFit"
		  />
          <!-- <u-image width="86rpx" height="86rpx" :src="item.icon"></u-image> -->
        </view>
      </view>
      <!-- </scroll-view> -->
    </view>
  </view>
</template>
<script>
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
import config from "@/common/config";
import { mapMutations } from "vuex";
export default {
  components: { xmInfo },
  data() {
    return {
      triggered: false,
      loadStatus: "loadmore",
      loading: true,
      background: {
        backgroundColor: "#3E97B0",
      },
      nameIcon: "/static/image/zfgs/index/icon@2x.png",
      src: "/static/image/zfgs/index/icon@2x.png",
      cuIconList: [
        {
          name: "项目详情",
          icon: "/static/image/zfgs/index/icon@2x(1).png",
		      iconName: "menu:xmxq",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/info/pmProjectinformation/detailsForm",
          isSHow: false,
        },
        {
          name: "项目周报",
          icon: "/static/image/zfgs/index/xmzb.png",
		      iconName: "menu:xmzb",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/weekly/pmWeekly/list",
          isSHow: false,
        },
		{
		  name: "进/撤场",
		  icon: "/static/image/zfgs/index/jcqr.png",
		  iconName: "menu:jcqr",
		  num1: 0,
		  num2: 10,
		  url:
		    "/pages/zfgs/proj/enex/pmApproach/list" +
		    "?status=" +
		    config.STATUS_ENTZ,
		  status: config.STATUS_ENTZ,//进撤场合并status未用
		  isSHow: false,
		},
    //     {
    //       name: "进场确认",
    //       icon: "/static/image/zfgs/index/jcqr.png",
		  // iconName: "menu:jcqr",
    //       num1: 0,
    //       num2: 10,
    //       url:
    //         "/pages/zfgs/proj/enex/pmApproach/list" +
    //         "?status=" +
    //         config.STATUS_ENTZ,
    //       status: config.STATUS_ENTZ,
    //       isSHow: false,
    //     },
        {
          name: "材料收货",
          icon: "/static/image/zfgs/index/clsh.png",
		  iconName: "menu:clsh",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/material/receive/pmMaterialneedArr/list",
          isSHow: false,
        },
        {
          name: "整改提交",
          icon: "/static/image/zfgs/index/zgtj.png",
		  iconName: "menu:zgtj",
          num1: 0,
          num2: 10,
          url:
            "/pages/zfgs/proj/zg/pmRectification/list" +
            "?status=" +
            config.zgStatus,
          status: config.zgStatus,
          isSHow: false,
        },
    //     {
    //       name: "撤场确认",
    //       icon: "/static/image/zfgs/index/ccqr.png",
		  // iconName: "menu:ccqr",
    //       num1: 0,
    //       num2: 10,
    //       url:
    //         "/pages/zfgs/proj/enex/pmApproach/list" +
    //         "?status=" +
    //         config.STATUS_EN,
    //       status: config.STATUS_EN,
    //       isSHow: false,
    //     },
        {
          name: "现场签证",
          icon: "/static/image/zfgs/index/xcqz.png",
		  iconName: "menu:xcqz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/design/visa/pmVisa/list",
          isSHow: false,
        },
        {
          name: "材料查询",
          icon: "/static/image/zfgs/index/clcx.png",
		  iconName: "menu:clcx",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/material/bom/pmMaterial/list",
          isSHow: false,
        },
        {
          name: "设计变更",
          icon: "/static/image/zfgs/index/sjbg.png",
		  iconName: "menu:sjbg",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/design/change/pmDesignchange/list",
          isSHow: false,
        },
        {
          name: "试压冲洗",
          icon: "/static/image/zfgs/index/sycx.png",
		  iconName: "menu:sycx",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/pressure/pmPressuretest/list",
          isSHow: false,
        },
        {
          name: "报装附件",
          icon: "/static/image/zfgs/index/xmfj.png",
		  iconName: "menu:bzfj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/index/bzfj/list",
          isSHow: false,
        },
        {
          name: "延期豁免",
          icon: "/static/image/zfgs/index/yqhm.png",
		  iconName: "menu:yqhm",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/delay/pmDelay/list",
          isSHow: false,
        },
        {
          name: "工程日志",
          icon: "/static/image/zfgs/index/gcrz.png",
		  iconName: "menu:gcrz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/log/pmPjournal/list",
          isSHow: false,
        },
        {
          name: "打卡",
		      iconName: "menu:dk",
          icon: "/static/image/zfgs/index/dk.png",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/index/dk/index",
          isSHow: false,
        },
        {
          name: "巡检",
          icon: "/static/image/zfgs/index/icon@2x(3).png",
		      iconName: "menu:xj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/xj/pmInspection/list",
          isSHow: false,
        },

      ],
      itemContent: {},
      isApp: false,

      cuIconListApp: [
        {
          name: "项目详情",
          icon: "/static/image/zfgs/index/icon@2x(1).png",
		  iconName: "menu:xmxq",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/info/pmProjectinformation/detailsForm",
          isSHow: false,
        },
        {
          name: "进/撤场",
          icon: "/static/image/zfgs/index/icon@2x(2).png",
		  iconName: "menu:jcc",
          num1: 0,
          num2: 10,
          url:
            "/pages/zfgs/proj/enex/pmApproach/list" +
            "?status=" +
            config.STATUS_NOT,
          status: config.STATUS_NOT,
          isSHow: false,
        },
        {
          name: "巡检",
          icon: "/static/image/zfgs/index/icon@2x(3).png",
		  iconName: "menu:xj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/xj/pmInspection/list",
          isSHow: false,
        },
        {
          name: "整改",
          icon: "/static/image/zfgs/index/icon@2x(4).png",
		  iconName: "menu:zg",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/zg/pmRectification/list",
          isSHow: false,
        },
        {
          name: "材料抽检",
          icon: "/static/image/zfgs/index/icon@2x(5).png",
		  iconName: "menu:clcj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/material/check/pmMaterialcheck/list",
          isSHow: false,
        },
        {
          name: "设计变更",
          icon: "/static/image/zfgs/index/icon@2x(6).png",
		  iconName: "menu:sjbg",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/design/change/pmDesignchange/list",
          isSHow: false,
        },
        {
          name: "试压",
          icon: "/static/image/zfgs/index/icon@2x(7).png",
		  iconName: "menu:sycx",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/pressure/pmPressuretest/list",
          isSHow: false,
        },
        {
          name: "接水",
          icon: "/static/image/zfgs/index/icon@2x(9).png",
		  iconName: "menu:js",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/job/pmConnectwaterjob/list",
          isSHow: false,
        },
        {
          name: "签证",
          icon: "/static/image/zfgs/index/icon@2x(10).png",
		  iconName: "menu:xcqz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/design/visa/pmVisa/list",
          isSHow: false,
        },
        {
          name: "中间验收",
          icon: "/static/image/zfgs/index/icon@2x(11).png",
		  iconName: "menu:zjys",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/accept/ance/pmAcceptance/list",
          isSHow: false,
        },
        {
          name: "预验收",
          icon: "/static/image/zfgs/index/icon@2x(12).png",
		  iconName: "menu:yys",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/accept/pre/pmPreacceptance/list",
          isSHow: false,
        },
        {
          name: "管道废除",
          icon: "/static/image/zfgs/index/icon@2x(13).png",
		  iconName: "menu:gdfc",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/pipe/pmWastepipeData/list",
          isSHow: false,
        },
        {
          name: "竣工验收",
          icon: "/static/image/zfgs/index/icon@2x(14).png",
		  iconName: "menu:jgys",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/accept/supply/pmWatersupply/list",
          isSHow: false,
        },
        {
          name: "项目文件",
          icon: "/static/image/zfgs/index/xmfj.png",
		  iconName: "menu:xmwj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/index/xmwj/list",
          isSHow: false,
        },
        {
          name: "报装附件",
          icon: "/static/image/zfgs/index/xmfj.png",
		  iconName: "menu:bzfj",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/index/bzfj/list",
          isSHow: false,
        },
        {
          name: "报装日志",
          icon: "/static/image/zfgs/index/bzrz.png",
		  iconName: "menu:bzrz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/index/bzrz/list",
          isSHow: false,
        },
        {
          name: "延期豁免",
          icon: "/static/image/zfgs/index/yqhm.png",
		  iconName: "menu:yqhm",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/delay/pmDelay/list",
          isSHow: false,
        },
        {
          name: "挂表",
          icon: "/static/image/zfgs/index/gb.png",
		  iconName: "menu:gb",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/meter/pmWatermeter/list",
          isSHow: false,
        },
        {
          name: "通水推送报装",
          icon: "/static/image/zfgs/index/tstbz.png",
		  iconName: "menu:tstbz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/process/water/pmWater/form",
          isSHow: false,
        },
        {
          name: "工程日志",
          icon: "/static/image/zfgs/index/yqhm.png",
		  iconName: "menu:gcrz",
          num1: 0,
          num2: 10,
          url: "/pages/zfgs/proj/log/pmPjournal/list",
          isSHow: false,
        },
		{
		  name: "洽商单",
		  icon: "/static/image/zfgs/index/qsd.png",
		  iconName: "menu:qsd",
		  num1: 0,
		  num2: 10,
		  url: "/pages/zfgs/design/negoti/list",
		  isSHow: false,
		},
      ],
      menuList: [],
    };
  },
  onShow() {
    uni.showTabBar();
  },
  onLoad(e) {
    if (typeof e.item !== "undefined") {
      try {
        this.itemContent = JSON.parse(e.item);
        console.log(this.itemContent);
      } catch (error) {
        console.error("Failed to parse item:", error);
      }
    } else {
      console.warn("Item is undefined.");
    }
    // this.setProjStatus(this.itemContent.projStatus == this.vuex_config.projStatus);
    this.setProjStatus(this.itemContent.projStatus);
    this.getPlatForm();
  },
  methods: {
    ...mapMutations("auth", ["setProjStatus"]),
    async refresherrefresh() {
      this.triggered = true;
      await this.getPlatForm();
      this.triggered = false;
    },

    customBack() {
      // 跳转到工作台页面
      // uni.navigateTo({
      //   url: "/pages/zfgs/proj/info/pmProjectinformation/list",
      // });
	  uni.navigateBack({
	    delta: 1,
	  });
    },
    /**
     * 请求静态数据只是为了代码不那么乱
     * 分次请求未作整合
     */
    async loadData(menuName) {
      // this.menuList = this.$store.state.auth.menuList;
      this.$u.api.zfgs.getWxCardList({
			    ctype:menuName
		  }).then((res)=>{
          console.log(res,'menuName',menuName);
			    this.showMenu(res);
		  })
    },
    //显示菜单
    showMenu(list) {
        const systemInfo = uni.getSystemInfoSync();
        const currentPlatform = systemInfo.uniPlatform;
        if(systemInfo.environment === 'wxwork'){
          this.cuIconListApp.forEach((item) => {
          list.forEach((res) => {
            if (res.params == item.iconName) {
              item.isSHow = true;
              item.treeSort = res.treeSort;
              return;
            }
          });
          });
          console.log(this.cuIconListApp,'this.cuIconListApp');
          // this.cuIconList 过滤掉isSHow为false的数据
          this.cuIconListApp = this.cuIconListApp.filter((item) => {
            return item.isSHow;
          });
          // 升序
          this.cuIconListApp.sort((a, b) => {
            return a.treeSort - b.treeSort;
          });
          this.$forceUpdate();
          this.loading = false;
        }else{
          this.cuIconList.forEach((item) => {  
            list.forEach((res) => {
              if (res.params == item.iconName) {
                item.isSHow = true;
                item.treeSort = res.treeSort;
                return;
              }
            });
          });
          // this.cuIconList 过滤掉isSHow为false的数据
          this.cuIconList = this.cuIconList.filter((item) => {
            return item.isSHow;
          });
          // 升序
          this.cuIconList.sort((a, b) => {
            return a.treeSort - b.treeSort;
          });
          this.$forceUpdate();
          this.loading = false;
        }
    },

    goRoute(url, status) {
      console.log(this.itemContent, "this.itemContent");
      uni.showLoading({
        title: '加载中...',
        mask: true, 
      });
      // url 拼接 status 1 表示 2 表示进场确认 3 表示 撤场确认
      if (!!status) {
        url =
          url +
          "&item=" +
          JSON.stringify(this.itemContent) +
          "&status=" +
          status;
        uni.navigateTo({
          url: url,
          complete() {
            // 在页面跳转完成后隐藏加载提示
            uni.hideLoading();
          },
        });
      } else {
        url = url + "?item=" + JSON.stringify(this.itemContent);
        uni.navigateTo({
          url: url,
          complete() {
            // 在页面跳转完成后隐藏加载提示
            uni.hideLoading();
          },
        });
      }
    },
    async getPlatForm() {
      const systemInfo = uni.getSystemInfoSync();
      const currentPlatform = systemInfo.uniPlatform;

      // if (currentPlatform === "mp-weixin") {
        
      //   // await this.loadData("企业微信");
      // }
      if(systemInfo.environment === 'wxwork'){
        await this.loadData("wxwork");
      }else{
        await this.loadData("mp-weixin");
      }
    },
  },
  onUnload() {
    this.setProjStatus(false);
  },
};
</script>
<style scoped lang="scss">
.cu-item {
  width: 41% !important;
  height: 90px;
}

.cuIcon-cardboardfill {
  margin-top: 20px !important;
}
.xm-title {
  border-radius: 20rpx;
  font-size: 36rpx;
  background-color: #fff;
  // background-image: url("/static/image/zfgs/index/icon@2x.png");
  // background-repeat: no-repeat;
  // background-size: 38rpx 42rpx;
  // background-position: 10rpx 10rpx;
  position: relative;
  .xm-title-p1 {
    color: #999999;
    font-size: 36rpx;
    line-height: 40rpx;
    margin-bottom: 8rpx;
  }
  .xm-title-p2 {
    color: #3d3d3d;
    line-height: 48rpx;
  }
  .xm-title-img {
    width: 38rpx;
    height: 42rpx;
    position: absolute;
    top: 0;
    right: 32rpx;
  }
}
.xm-item-1 {
  font-size: 42rpx;
  color: #3d3d3d;
  line-height: 40rpx;
  position: relative;
  margin-bottom: 26rpx;
}
.xm-item-1::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 32rpx;
  height: 4rpx;
  background-color: #bbbbbb;
  bottom: -16rpx;
  left: 0;
}
.xm-item {
  width: 200rpx;
}
.radius {
  border-radius: 20rpx;
}
.xm-item-2 {
  font-size: 34rpx;
  color: #999999;
}
</style>